<template>
  <div>
    <div>
      <el-button @click="turn">返回</el-button>
    </div>
    <h2><span id="gun">丨</span>修改企业信息</h2>
    <div id="content" class="clear">
      <p>
        <span class="content-name">企业名称</span
        ><el-input v-model="input" placeholder="请输入企业名称"></el-input>
      </p>
      <p>
        <span class="content-name">注册地址</span>
        <el-select v-model="value" placeholder="请选择地区">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input v-model="inputDress" placeholder="请输入详细地址"></el-input>
      </p>

      <div class="clear">
        <p class="content-name content-fl content-fr1">企业简介</p>
        <el-input
          class="content-fr content-fr1"
          type="textarea"
          :rows="3"
          placeholder="请输入企业简介"
          v-model="textarea"
        >
        </el-input>
      </div>

      <!-- <span class="content-name content-fl">企业简介</span> -->
      <p class="clear">
        <span class="content-name">客服电话</span>
        <el-input v-model="inputTle" placeholder="请输入客服电话"></el-input>
      </p>
      <p class="clear">
        <span class="content-name content-fl">营业执照</span>
        <el-upload
          class="avatar-uploader content-fr"
          action="Httphead"
          :show-file-list="false"
          :on-change="handleChange"
          :auto-upload="false"
        >
          <img v-if="imageUrl" :src="Httphead + '/' + imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p>
      <p class="clear">
        <span class="content-name content-fl">门头照片</span>
        <el-upload
          class="avatar-uploader content-fr"
          :action='Httphead'
          :show-file-list="false"
          :on-change="handleChange2"
          :auto-upload="false"
        >
          <img v-if="imageUrl" :src="Httphead + '/' + imageUrls"  class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p>
      <p>
        <span class="content-name">负责人姓名</span>
        <el-input v-model="inputBoss" placeholder="请输入负责人姓名"></el-input>
      </p>
      <p>
        <span class="content-name">负责人电话</span>
        <el-input v-model="inputBossNum" placeholder="请输入负责人电话"></el-input>
      </p>
      <div>
        <el-button @click="seesee" id="sure" type="primary">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {getTime} from "@/assets/js/public"; 
export default {
  name:'changeenterprise',
  methods: {
    //当用户选择某个文件的时候
    handleChange(file) {
      console.log(file);
      this.imageUrl = "";
      this.imgFile = "";
      // 先判断文件的类型和大小
      let fileNameList = file.name.split(".");
      // 文件后缀名
      let res = fileNameList[fileNameList.length - 1];
      console.log(res);
      let typeArr = ["png", "jpg", "jpeg", "webp"];
      if (!typeArr.includes(res)) {
        return this.$message.error("上传头像图片只能是 jpg,png,jpeg,webp格式!");
      }

      if (file.size / 1024 / 1024 > 2) {
        return this.$message.error("文件大小不能超过2M");
      }

      this.imgFile = file.raw; /* 将图片装进去 */

      // 文件一定要用formData装起来
      let formData = new FormData();

      formData.append("file", this.imgFile);

      // 发起请求上传图片
      this.$axios({
        url: this.Httphead + "/userSettle/upload",
        method: "post",
        data: formData,
      })
        .then((res) => {
          console.log(res);
          this.imageUrl = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleChange2(file) {
      console.log(file);
      this.imageUrl = "";
      this.imgFile = "";
      // 先判断文件的类型和大小
      let fileNameList = file.name.split(".");
      // 文件后缀名
      let res = fileNameList[fileNameList.length - 1];
      console.log(res);
      let typeArr = ["png", "jpg", "jpeg", "webp"];
      if (!typeArr.includes(res)) {
        return this.$message.error("上传头像图片只能是 jpg,png,jpeg,webp格式!");
      }

      if (file.size / 1024 / 1024 > 2) {
        return this.$message.error("文件大小不能超过2M");
      }

      this.imgFile = file.raw; /* 将图片装进去 */

      // 文件一定要用formData装起来
      let formData = new FormData();

      formData.append("file", this.imgFile);

      // 发起请求上传图片
      this.$axios({
        url: this.Httphead + "/userSettle/upload",
        method: "post",
        data: formData,
      })
        .then((res) => {
          console.log(res);
          this.imageUrls = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    seesee(){
      this.$axios({
        url: this.Httphead + '/setting/updateEnterprise',
        method: 'post',
        data:{
          name:this.input,
          location:this.inputDress,
          des:this.textarea,
          serviceNumber:this.inputTle,
          postbox:this.$store.state.routers.userInfo.number,
          boss:this.inputBoss,
          bossNumber:this.inputBossNum,
          license:this.imageUrl,
          photo:this.imageUrls,
          regTime:getTime(),
        }
      }).then((res) => {
          if (res.code === 200) {
            console.log('res',res);
            this.$message({
              message: '修改成功',
              type: 'success',
            })
            this.$router.push('puditprise')
            // this.$router.push('storeSet')
          } else {
            this.$message({
              message: '服务器出错了',
              type: 'error',
            })
          }
        }).catch((err) => {
          console.log('修改失败', err)
        })
    },
    turn() {
      this.$router.push('storeSet')
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // seesee(){
    //   this.$router.push('puditprise')
    // }
  },
  data() {
    return {
      Httphead:'http://172.16.113.187:8080',
      firmData:{},
      imgFile:'',
      input:'',
      value:'',
      inputDress:'',
      imageUrl: '',
      imageUrls:'',
      textarea:'',
      inputTle:'',
      inputBoss:'',
      inputBossNum:'',
      postbox:15881041458,
      options: [
        {
          value: '选项1',
          label: '成都',
        },
        {
          value: '选项2',
          label: '北京',
        },
        {
          value: '选项3',
          label: '武汉',
        },
        {
          value: '选项4',
          label: '海南',
        },
        {
          value: '选项5',
          label: '乌鲁木齐',
        },
      ],
      value: '',
    }
  },
  created() {
    // this.getFirm();
    console.log("本次路由跳转信息：", this.$route.params);
    this.firmData = this.$route.params.firmData;
    this.input = this.firmData.name;
    this.value = this.firmData.location;
    this.inputDress = this.firmData.location
    this.imageUrl = this.firmData.license
    this.imageUrls = this.firmData.photo
    this.textarea = this.firmData.des
    this.inputTle = this.firmData.serviceNumber
    this.inputBoss = this.firmData.boss
    this.inputBossNum = this.firmData.bossNumber
    // console.log(this.firmData);
  },
}
</script>

<style scoped>
.el-textarea{
  width: 40%;
}
.el-select{
  width: 15%;
  padding: 0;
}
.avatar-uploader {
  /* width: 80px;
  height: 80px; */
  background-color: rgb(196, 194, 194);
}
.content-fl {
  float: left;
}
.content-fr {
  float: left;
}
.content-fr1 {
  /* display: inline-block; */
  float: left;
}
.content-name {
  display: inline-block;
  width: 10%;
}
.el-input {
  width: 40%;
  display: inline-block;
}
#gun {
  color: #0082cc;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.clear::after {
  content: '';
  display: block;
  clear: both;
}

#sure{
  width: 10%;
  margin-top: 10px;
  margin-left: 240px;
}
</style>
